<template>
    <div class="big">
        <!-- 头 -->
        <el-header>商城</el-header>
        <div class="kong"></div>
        <!-- 内容 -->
        <el-main>
            <SmallBox v-for="item in msg" :msg="item"> </SmallBox>

        </el-main>
        <!-- 底部 -->
        <div class="foter">
            <div>
                <i class="el-icon-shopping-bag-2"></i>
                <p class="mk">鲜奶商城</p>
            </div>
            <div>
                <i class="el-icon-user"></i>
                <p class="us">个人中心</p>
            </div>

        </div>
    <!-- 购物车结算栏 -->
        <div class="accounts">
            <el-badge :value="0" class="item">
                <i class="el-icon-s-goods shopping"></i>
            </el-badge>

            <div class="num">
                <p class="mmm">￥ <span>21.98</span> </p>
                <p class="txt">优惠￥<span>4.02</span> </p>
            </div>
            <div class="zui">结算</div>
            <div class="triangle"></div>
        </div>
 
        
    </div>
</template>

<script>
import SmallBox from '@/components/SmallBox.vue';
export default {
    components: {
        SmallBox
    },
    data() {
        return {
            msg: [
                { img: require("@/assets/img/11.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "10.99", kucun: "1000" },
                { img: require("@/assets/img/22.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "12000" },
                { img: require("@/assets/img/33.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "8.99", kucun: "1080" },
                { img: require("@/assets/img/44.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "6.99", kucun: "1960" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
                { img: require("@/assets/img/55.jpg"), txt: "菊乐牛奶国民好鲜奶(限时折扣) 750ml/瓶", ml: "9.99", kucun: "42055" },
            ]

        }
    }
}
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
    position: fixed;
    width: 100vw;
    height: 16vw;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
    z-index: 3;
}

.kong {
    // width: 100vw;
    height: 16vw;
    z-index: -1;
}

.el-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #f3f5f7;
    overflow: scroll;
    padding: 2.6667vw;
    overflow-y: hidden;
}

//底部
.foter {
    width: 100%;
    height: 13.3333vw;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 3;
    position: fixed;
    bottom: 0;
    font-size: 5.8667vw;
    text-align: center;

    p {
        margin: 0;
        font-size: 1.6vw;
    }
}


//购物车结算页面
.accounts {
    width: 90%;
    color: white;
    background-color: #42485c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 14.6667vw;
    left: 5%;
    z-index: 3;
    border-radius: 8vw;
    // padding: 1.3333vw 0;
    //红点小标记
    .item {
        margin-top: 2.6667vw;
        margin-right: 10.6667vw;
        margin-left: 30px;
    }

    //font字体图标
    .shopping {
        font-size: 6.6667vw;
        color: #2b84fe;
    }

    //价格
    .num {
        font-size: 2.1333vw;
        margin-right:8vw;
        p{
            margin: 0;
          color: white;
        }
        .mmm {
            font-size: 4.2667vw;

        }
        .txt{
                color: #8c8d9f;
            }
    } 
    //结算按钮
    .zui{
        width: 37.3333vw;
        height: 12vw;
        text-align: center;
        line-height: 12vw;
        background-color: #2b84fe;
        border-top-right-radius: 8vw;
        border-bottom-right-radius: 8vw;
        font-size: 4.2667vw;
    }

}
.triangle {
  width: 0;
  height: 0;
  border-left: 4.8vw solid transparent;  
  border-right: 10.1333vw solid transparent;  
  border-bottom: 12vw solid #2b84fe; 
  position: absolute;
    left: 47.8vw;
}

</style>